<template>
  <div class="Citylist">
    <header>
      <van-icon name="arrow-left" @click="retur" />
      <span>城市选择</span>
      <span></span>
    </header>
    <main>
      <van-index-bar>
        <van-index-anchor index="name" v-for="(item,name) in data" :key="name">
        <van-cell :title="name" />
        </van-index-anchor>
      </van-index-bar>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      FirstPin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      data: [],
    };
  },
  created() {
  },
  mounted(){
    axios.get(`http://47.102.145.189:8009/area/city?level=1" -H "accept: application/json`).then(res=>{
        this.data = res.data.body
        console.log(this.data)
        let cityName={};
        this.FirstPin.forEach(item=>{
          cityName[item]=[];
          this.data.forEach(el=>{
            let first = el.pinyin.substring(0,1).toUpperCage();
            if(first == item){
              cityName[item].push(el)
            }
          })
        });
        console.log(cityName)
        this.$nextTick(()=>{
          this.data=cityName
        })
    }).catch(err=>{
      console.log(err)
    })
  },
  methods: {
    retur() {
      this.$router.go("-1");
    },
  },
};
</script>

<style scoped lang="scss">
.Citylist {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    background: #efefef;
    align-items: center;
    font-size: 15px;
  }
  main {
    flex: 1;
    overflow: scroll;
  }
}
</style>
